<template>
	<view class="skeleton">
		<view class="skeleton-item" v-for="n in 5" :key="n">
			<view class="skeleton-cover"></view>
			<view class="skeleton-info">
				<view class="skeleton-title"></view>
				<view class="skeleton-desc"></view>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
.skeleton {
	display: flex;
	flex-direction: column;
	padding: 20rpx;
}

.skeleton-item {
	background: #f7f7f7;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	padding: 20rpx;
	animation: pulse 1.5s infinite;
}

.skeleton-cover {
	width: 100%;
	height: 200rpx;
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	border-radius: 8rpx;
	animation: shimmer 1.5s infinite;
}

.skeleton-info {
	margin-top: 10rpx;
}

.skeleton-title {
	width: 60%;
	height: 20rpx;
	background: #f0f0f0;
	border-radius: 4rpx;
	margin-bottom: 10rpx;
}

.skeleton-desc {
	width: 80%;
	height: 16rpx;
	background: #f0f0f0;
	border-radius: 4rpx;
}

@keyframes pulse {
	0% {
		background-color: #f7f7f7;
	}
	50% {
		background-color: #e0e0e0;
	}
	100% {
		background-color: #f7f7f7;
	}
}

@keyframes shimmer {
	0% {
		background-position: -200px 0;
	}
	100% {
		background-position: 200px 0;
	}
}
</style> 